@import '../../../../variables';
@import '../../tasks/task/task.component.mixins';

:host {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding-top: $s * 0.5;
  padding-bottom: $s * 0.5;
  padding-left: $s;
  border: 1px solid $dark-theme-separator-color;
  border-radius: $task-border-radius;
  opacity: 0.9;
  cursor: pointer;

  @include lightTheme {
    border-color: $light-theme-separator-color;
  }
  @include darkTheme {
    border-color: $dark-theme-separator-color;
  }

  &:hover {
    border-color: $c-accent;
    color: $c-accent;

    mat-icon.add {
      display: block;
    }

    mat-icon.default {
      display: none;
    }
  }

  mat-icon {
    margin-left: $s;
    margin-right: $s * 1.5;
    min-width: 24px;
    opacity: 0.8;

    &.add {
      display: none;
    }
  }
}

.duration {
  margin-left: auto;
  margin-right: $s * 2;
  opacity: 0.6;
}

.custom-event-title {
}
